<template>
  <div class="Page">
        <el-pagination
        background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="data.pageIndex"
          :page-sizes="[20, 30, 40, 50]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="quantity">
        </el-pagination>
  </div>
</template>

<script>
  export default{
    name:'Paging',
        data(){
            return {
                data:{
                  pageIndex:1,
                  pageSize:20,

                }
            }
        },
        props:['quantity'],
        methods:{
           handleSizeChange(val) {
               this.beg.pageSize=val
               this.Postdata(this.beg)
           },
           handleCurrentChange(val) {
                this.beg.pageIndex=val
               this.Postdata(this.beg)
           },
        }

  }
</script>

<style>
   .Page{
     margin: auto;
     width: 50%;
   }

</style>
